<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" %>
<%@ taglib uri="/struts-tags" prefix="s" %>
<html>
<head>
    <title>
        Menu Order
    </title>
    <script src="js/jquery-3.1.0.js"></script>
    <script>
        $(document).ready(function() {
            $("#newOrder").click(function () {
                $.getJSON("newOrder.action", function (data, status) {
                    $.each(data.result, function (i, o) {
                        showMenu(o);
                    });
                });
            });
            $("#cash").click(function () {
                $.getJSON("completeOrder.action", function (data, status) {

                })
            });
        });

        function showDetail(o) {
            $("#detail").append("<tr>"+
                    "<td align='center'>" +
                    o.dishId + "</td>" +
                    "<td align='center'> " + o.cate + "</td>" +
                    "<td align='center'> " + o.amount +"</td>" +
                    "<td align='center'> " + "<input type='button'>" + "</td>" +
                    "</tr>"
            )
        }

        function removeDish(id, cate) {
            $.getJSON("removeDish.action", {dishId : id, cate : cate}, function (data) {
                showDetail(data);
            })
        }

        function addDish(id, cate) {
            $.getJSON("addDish.action", {dishId : id, cate : cate}, function (data) {
                showDetail(data);
            })
        }

        function showMenu(o) {
            $("#menu").append("<tr >" +
                    "<td align='center'>"+o.name+"</td>" +
                    "<td align='center'>"+o.price+"</td>" +
                    "<td align='center'>" +
                    "<input type='button' onclick='addDish(" + o.id + ", 1" + ")'>" +
                    "</td>"+
                    "<td align='center'>"+
                    "<input type='button' onclick='addDish(" + o.id + ", 0" + ")'>" +
                    "</td>"+
                    "</tr>");
        }
    </script>
</head>
<body>
<table align="center" id="menu">
    <tr>
        <th>菜名</th>
        <th>价格</th>
        <th>堂食</th>
        <th>外卖</th>
    </tr>
</table>
<br>
<form action="completeOrder.action">
<table align="center">
    <tr>
        <td align="center"><input type="text" name="receive" align="center" id="receive"></td>
        <td align="center"><input type="submit" value="收银" align="center" id="cash"></td>
    </tr>
</table>
</form>
<br>
<table align="center" id="detail">
    <tr>
        <th>DishId</th>
        <th>Category</th>
        <th>Amount</th>
    </tr>
    <s:iterator value="#session.detailList" id="detail">
        <tr>
            <td align="center"><s:property value="#detail.id"/> </td>
            <td align="center"><s:property value="#detail.dishId"/> </td>
            <td align="center"><s:property value="#detail.cate"/> </td>
            <td align="center"><s:property value="#detail.amount"/> </td>
            <td>
            <a href="removeDish.action?detail.dishId=<s:property value="#detail.dishId"/>&detail.cate=<s:property value="#detail.cate"/> ">Remove</a>
            </td>
        </tr>
    </s:iterator>
</table>
<br>
<a href="cancelOrder.action">Cancel</a>
<input type="button" value="New Order" id="newOrder"/>
<s:debug></s:debug>
</body>
</html>